<template>
    <div id="site">

        <!-- 我的地址 --> 
        <div id="checked">
            <van-checkbox-group v-model="result" ref="checkboxGroup" @click="checkAll">
                <van-row v-for="(item,index) in list" :key="index">
                    <van-col span="3">
                        <van-checkbox name="a"></van-checkbox>
                    </van-col>
                    <van-col span="21">
                        <van-swipe-cell>
                            <div class="checked-box">
                                <div>
                                    <span>{{item.username}}</span>
                                    <span>{{item.mobile}}</span>
                                </div>
                                <p>{{item.value}}</p>
                            </div>
                            <template #right>
                                <van-button 
                                    square text="删除" 
                                    type="danger" 
                                    class="delete-button" 
                                    @click="del(index)"
                                    />
                            </template>
                        </van-swipe-cell>
                    </van-col>
                </van-row>
            </van-checkbox-group>
        </div>
        
    </div>
</template>

<script>
export default {
    props:["list"],
    data() {
        return {
            result:[],
        }
    },
    methods: {
        // 全选/反选
        checkAll(){
            this.$refs.checkboxGroup.toggleAll();
        },
        // 点击 复选框 选中
        check(){
            if(this.list.length == this.result.length){
                this.checked = true;
            }else{
                this.checked = false;
            }
        },
        // 点击 删除
        del(index){
            this.list.splice(index,1);
            localStorage.setItem("list",JSON.stringify(this.list));
        }
    },
}
</script>

<style lang="scss" scoped>
#site{
    width:100%;
    height:100%;
    background-color: #fff;
    #checked{
        width:100%;
        height:100%;
        font-size: 0.3rem;
        // border-bottom:1px solid rgb(235, 236, 234);
        .van-checkbox-group{
            width:100%;
            height:100%;
            .van-row{
                border-bottom:1px solid rgb(235, 236, 234);
                .van-col{
                    .van-checkbox{
                        margin:0.5rem 0 0 0.2rem;
                    }
                    .van-swipe-cell{
                        width:100%;
                        height:100%;
                        .checked-box{
                            height:1rem;
                            padding:0.3rem 0;
                            span{
                                margin-right: 0.3rem;
                            }
                            p{
                                font-size: 0.27rem;
                                color:gray;
                            }
                        }
                        .delete-button {
                            height: 1.6rem;
                        }
                    }
                }
            }
        }
    }
}
</style>